<template>
  <div class="common-layout">
    <el-container class="full-box">
      <el-header class="elheader">
        <el-row :gutter="2">
          <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="elcol">
            <!-- 添加点击事件 -->
            <el-image
              :src="logo"
              class="elitem elimage"
              :lazy="true"
              fit="fill"
              @click="navigateToHome" 
          
            />
            <h2 class="elitem" style="padding-left: 5px;">通用项目管理进度管理平台</h2>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="elcol">
            <el-image :src="usericon" class="elimage userIcon" />
            <div class="userInfo">
              <el-text class="mx-1" size="large">{{ userInfo.username }}</el-text>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside class="elaside">
          <el-menu class="el-menu-vertical-demo">
            <el-menu-item
              v-for="(item, index) in menuList"
              :key="index"
              v-show="item.isShow"
              class="menuItem"
              @click="handleMenuClick(item.id)"
            >
              <div style="display: flex; align-items: center;">
                <el-icon v-show="item.id == 1"><Menu /></el-icon>
                <el-icon v-show="item.id == 2"><Histogram /></el-icon>
                <el-icon v-show="item.id == 3"><Grid /></el-icon>
                <el-icon v-show="item.id == 4"><House /></el-icon>
                <el-icon v-show="item.id == 5"><User /></el-icon>
                <span>{{ item.name }}</span>
              </div>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <RouterView /> <!-- 右侧内容区域动态加载 -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import logo from './img/Rstar.png';
import usericon from './img/userIcon.jpg';
import { reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const userInfo = reactive({
  id: route.query.id,
  roleId: route.query.roleId,
  username: route.query.username,
  rolename: route.query.rolename,
});

const menuList = reactive([
  {
    id: 1,
    name: '项目管理',
    isShow: true,
  },
  {
    id: 2,
    name: '资源管理',
    isShow: true,
  },
  {
    id: 3,
    name: '任务管理',
    isShow: true,
  },
  {
    id: 4,
    name: '团队管理',
    isShow: true,
  },
  {
    id: 5,
    name: '角色管理',
    isShow: () => {
      return userInfo.roleId == 1 || userInfo.roleId == 2 || userInfo.roleId == 3;
    },
  },
]);

// 菜单点击事件处理
const handleMenuClick = (id) => {
  if (id === 1) {
    router.push('/mainPage/project'); // 跳转到项目管理页面
  } else if (id === 2) {
    router.push('/mainPage/resource'); // 跳转到资源管理页面
  } else if (id === 3) {
    router.push('/mainPage/task'); // 跳转到任务管理页面
  } else if (id === 4) {
    router.push('/mainPage/team'); // 跳转到团队管理页面
  } else if (id === 5) {
    router.push('/mainPage/role'); // 跳转到角色管理页面
  }
};

// 跳转到 Home 页
const navigateToHome = () => {
  router.push('/mainPage'); // 跳转到 Home 页
};
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.elheader {
  display: grid;
  background: white;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 2px;
}
.elcontainer {
}
.elaside {
  background-color: rgb(159.5, 206.5, 255);
}

.elcol {
  display: flex;
  align-items: center;
}
.elitem {
  display: inline-block;
  cursor: pointer; /* 添加鼠标指针样式 */
}
.elimage {
  width: 5vh;
  height: 5vh;
}
.userIcon {
  border-radius: 50%;
  border: 1px solid black;
}
.userInfo {
  padding: 0 10px;
}
.menuItem {
  flex-direction: column;
  align-items: center;
}
.menuIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
}
</style>